<include file="Base/header" /> 	
   <link rel="stylesheet" type="text/css" href="__PUBLIC__/webuploader/webuploader.css">
   <link rel="stylesheet" type="text/css" href="__PUBLIC__/webuploader/style.css">
   <script type="text/javascript" src="__PUBLIC__/webuploader/webuploader.js"></script>
<div class="page-container">
	<include file="Base/menu" /> 
	<div class="page-content">
		<div class="container-fluid">
			<div class="row-fluid">
					<div class="span12"> 
						<!-- BEGIN PAGE TITLE & BREADCRUMB-->
						<h3 class="page-title">
						</h3>
						<ul class="breadcrumb">
							<li>
								<i class="icon-home"></i>
								<a href="/index.php/Admin/">首页</a> 
								<i class="icon-angle-right"></i>
							</li>
							<li><a href="#">基本设置</a></li>
						</ul>
						<!-- END PAGE TITLE & BREADCRUMB-->
					</div>
			</div>
			<div class="row-fluid">
				<div class="span12"> 
					<div class="portlet box tabbable">
						<div class="portlet-title">
							<div class="caption">
								<i class="icon-reorder"></i>
									<span class="hidden-480">首页轮播图设置</span>
							</div>
						</div>
					
						<form  method="post" class="form-horizontal" action="__URL__/Add">
							<div class="control-group"></div>
							<div class="control-group">
								<!-- <label class="control-label">ID</label> -->
								<div class="controls">
									<input type="hidden" class="m-wrap small"  name="id"  value="{$data.id}">
									<span class="help-inline"></span>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">请选择首页轮播图：</label>
								<div class="controls">
									<input type="hidden" name="id" id="edit_id" value="{$vo.id}">
                                    <input type="hidden" name="z_status" id="z_status" value="0"/>
                                    <div id="wrapper">
                                        <div id="container">
                                            <!--头部，相册选择和格式选择-->
                                            <div id="uploader">
                                                <div class="queueList">
                                                    <div id="dndArea" class="placeholder">
                                                        <div id="filePicker"></div>
                                                    </div>
                                                    <ul class="filelist">
                                                        <volist name="files" id="fs">
                                                            <li>
                                                                <input type="hidden" name="in_id[{$fs.id}]" value="{$fs.id}">
                                                                <p class="title">{$fs.name}</p>
                                                                <p class="imgWrap"><a class="lookimg" href="{$fs.path}" target="_blank"><img src="{$fs.path}"></a></p>
                                                                <p class="progress"><span></span></p>
                                                                <div class="file-panel" style="height: 0px;">
                                                                    <span class="cancel">删除</span>
                                                                </div>
                                                            </li>
                                                        </volist>
                                                      
                                                    </ul>
                                                </div>
                                                <div class="statusBar" <if condition="$res['status'] eq -1">style="display:none;"</if>>
                                                    <div class="progress" style="display:none;">
                                                        <span class="text">0%</span>
                                                        <span class="percentage"></span>
                                                    </div><div class="info"></div>
                                                    <div class="btns">
                                                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
								</div>
							</div>
							<div class="form-actions">
								<button type="submit" class="btn blue"><i class="icon-ok"></i>添加</button>
								<!-- <button type="button" class="btn">删除</button> -->
							</div>
						</form>
					
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
 <script>
    $('#dndArea').hide();
    $('.filelist li').on('mouseenter', function () {
        $(this).find('.file-panel').stop().animate({height: 30});
    });

    $('.filelist li').on('mouseleave', function () {
        $(this).find('.file-panel').stop().animate({height: 0});
    });

   $('.filelist li .cancel').on('click', function () {
        $('#pc_img_id').val(0);
        $(this).parent().parent().remove();
        $('#dndArea').show();
    });
</script> 
<script type="text/javascript" src="__PUBLIC__/js/admin/activity_upload.js"></script>

<script type="text/javascript">
    $(function () {
        // 初始化Web Uploader
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '__PUBLIC__' + '/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: "{:U('Ajax/ajaxUploader')}",
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                    '<div id="' + file.id + '" oid="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                    ),
                    $img = $li.find('img');

            // $list为容器jQuery实例
            $list = $('#fileList');
            $list.append($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, 210, 210);

        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        //上传文件前操作
        uploader.on('beforeFileQueued', function (file) {
            var c_n = $('.file-item').length;
            console.log(c_n);
            if (c_n >= 1) {
                var car_img_id = $('#car_img_id').val();
                $('.file-item').remove();
                uploader.on('fileDequeued');
                $.post("{:U('Ajax/delUpload')}", {id: car_img_id}, function (data) {
                });
            }
        })

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, data) {
            $('#car_img_id').val(data['data']['id']);
            $('#' + file.id).addClass('upload-state-done');
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                    $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });

        //编辑时加入已有图片
        function edit(id, name, path) {
            var $li = $(
                    '<div id="' + id + '" class="file-item thumbnail">' +
                    '<img src="' + path + '">' +
                    '<div class="info">' + name + '</div>' +
                    '</div>'
                    ),
                    $img = $li.find('img');
            // $list为容器jQuery实例
            $list = $('#fileList');
            $list.append($li);
        }

        var edit_id = "{$vo.id}";
        var car_img_id = "{$vo['car_img_id']}";
        if (edit_id && car_img_id) {
            edit("{$files[$vo['car_img_id']]['id']}", "{$files[$vo['car_img_id']]['name']}", "{$files[$vo['car_img_id']]['path']}")
        }
    });
</script>
<include file="Base/footer" />
